<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { conditionsDiscardProps } from "../utils/types";
import type { FormInstance } from 'element-plus'
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

const props = withDefaults(defineProps<conditionsDiscardProps>(), {
  formInline: () => ({
    labelOptions: [],
    tag_ids: "",
    sourceOptions: [],
    source: "",
    intend_status: "",
    called_times: null,
    created_at: "",
    type: 1,
    num: null
  })
});

const shortcuts = [
  {
    text: "上周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "上个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "三个月前",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

const intendStatusOptions = [{
  value: "noconnect",
  label: "未接通未确定"
}, {
  value: "unkown",
  label: "接通未确定"
}, {
  value: "refuse",
  label: "无意向"
}, {
  value: "intend",
  label: "有意向"
}]

const ruleFormRef = ref<FormInstance>();
const newFormInline = ref(props.formInline);

// 重置条件
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  newFormInline.value.num = null
  formEl.resetFields()
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="newFormInline"
      label-width="90px"
    >
      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">客户参数</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="客户标签:" prop="tag_ids">
              <el-select
                v-model="newFormInline.tag_ids"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in newFormInline.labelOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="数据来源:" prop="source">
              <el-select
                v-model="newFormInline.source"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in newFormInline.sourceOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="最新意向:" prop="intend_status">
              <el-select
                v-model="newFormInline.intend_status"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in intendStatusOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="被拨次数:" prop="called_times">
              <el-input
                type="number"
                v-model="newFormInline.called_times"
                placeholder="请输入"
                clearable
              >
                <template #prepend>超过</template>
              </el-input>
            </el-form-item>
          </re-col>
          <re-col :value="14" :xs="24" :sm="24">
            <el-form-item label="入池时间:" prop="created_at">
              <el-date-picker
                v-model="newFormInline.created_at"
                type="daterange"
                class="w-[240px]!"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
              />
            </el-form-item>
          </re-col>
        </el-row>
      </div>

      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">查询参数</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="执行条数:" prop="type">
              <el-radio-group v-model="newFormInline.type">
                <el-radio :value="1">满足条件的所有条数</el-radio>
                <el-radio :value="2">
                  自定义条数
                  <el-input
                    type="number"
                    class="w-[200px]! ml-2"
                    v-model="newFormInline.num"
                    placeholder="请输入"
                    clearable
                    @focus="newFormInline.type = 2"
                  />
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </re-col>
        </el-row>
      </div>
    </el-form>

    <el-button type="info" :icon="useRenderIcon('ri:brush-2-line')" plain @click="resetForm(ruleFormRef)">重置条件</el-button>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  width: 100%;
  background-color: #f3f6f9;
  padding: 0 20px;
  margin-bottom: 15px;
  border-radius: 7px;
  padding-bottom: 10px;

  .title {
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 50px;
    
    .line {
      width: 4px;
      height: 15px;
      border-radius: 5px;
      background-color: var(--pure-theme-menu-active-before);
      margin-right: 10px;
    }

    .bt{
      font-size: 14px;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>